<!--
 @description 编辑顾客信息
 @fileName EditConsumer.vue
 @author zengqiongying
 @created 2022/08/05 16:09:57
-->
<template>
  <div class="mine-container">
    <MineHeader arrow title="编辑顾客信息" bg-color="#F5F6F7" />
    <div class="fixed-foot">
      <div class="btn-submit" @click="handleSubmit">保存</div>
    </div>
    <div class="pt-page">
      <div class="custom-form">
        <div class="cell">
          <van-field
            v-model="formData.consumerName"
            label="顾客姓名："
            placeholder="请填写姓名（必填）"
            maxlength="10"
          />
        </div>
        <div class="cell">
          <van-field
            v-model="formData.consumerPhone"
            type="tel"
            label="顾客电话："
            placeholder="请填写手机（必填）"
            format-trigger="onBlur"
            :formatter="formatterTel"
            maxlength="11"
          />
        </div>
        <div class="cell">
          <van-field
            v-model="formData.consumerPhoneBak"
            type="tel"
            label="备用电话："
            placeholder="请填写备用电话"
            format-trigger="onBlur"
            :formatter="formatterTel"
            maxlength="11"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'EditConsumer',
  data() {
    return {
      formData: {
        consumerName: '', // 顾客姓名-门店
        consumerPhone: '', // 顾客联系电话-门店
        consumerPhoneBak: '' // 顾客备用联系电话-门店
      }
    }
  },
  computed: {
    ...mapGetters('order', ['consumer'])
  },
  watch: {
    consumer: {
      handler(val) {
        this.initFormData()
      },
      deep: true
    }
  },
  created() {
    this.initFormData()
  },
  activated() {
    this.initFormData()
  },
  methods: {
    ...mapMutations('order', ['updateConsumer']),
    // 更新顾客信息
    initFormData() {
      const data = this.consumer
      for (const key in this.formData) {
        this.$set(this.formData, key, data && data[key] || '')
      }
    },
    formatterTel(value) {
      if (value && !(/^1[3456789]\d{9}$/.test(value))) {
        this.$toast('请填写正确的手机号')
      }
      return value
    },
    handleSubmit() {
      const { consumerName = '', consumerPhone = '', consumerPhoneBak = '' } = this.formData
      if (consumerName === '') {
        this.$toast('顾客姓名不可为空')
        return
      }
      if (consumerPhone === '') {
        this.$toast('顾客电话不可为空')
        return
      }

      if (!(/^1[3456789]\d{9}$/.test(consumerPhone))) {
        this.$toast('顾客电话格式错误')
        return
      }
      if (consumerPhoneBak !== '') {
        if (!(/^1[3456789]\d{9}$/.test(consumerPhoneBak))) {
          this.$toast('备用电话格式错误')
          return
        }
        if (consumerPhone === consumerPhoneBak) {
          this.$toast('备用电话不能与顾客电话相同')
          return
        }
      }
      this.updateConsumer({ consumerName, consumerPhone, consumerPhoneBak })
      this.$nextTick(() => {
        this.$router.go(-1)
      })
    }
  }
}

</script>
<style lang='less' scoped>
  .fixed-foot{
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12PX 16PX 22PX;
    height: 82PX;
    box-sizing: border-box;
    background: #F5F6F7;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn-submit{
      flex: 1;
      height: 48PX;
      line-height: 48PX;
      background: linear-gradient(90deg, #00D5C0 0%, #05C4C3 100%);
      border-radius: 12PX;
      color: #FFFFFF;
      font-weight: bold;
      font-size: 16PX;
      text-align: center;
      letter-spacing: 1px;
    }
  }
  .pt-page{
    padding:16px 16px 82PX;
  }
</style>
